{% load cache %}
{% load static %}
{% load i18n %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GeekVPN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->

    <link href="{% static "GeekVPN/css/bootstrap.css"  %}" rel="stylesheet" media="screen">
    <link href="{% static "GeekVPN/css/bootstrap-theme.css"  %}" rel="stylesheet" media="screen">
    <link href="{% static "GeekVPN/css/bootstrap-switch.css"  %}" rel="stylesheet" media="screen">

    {% compress css %}
    <style type="text/css" >
        body {
        padding-top: 60px;
        padding-bottom: 240px;
        }
        .navbar{
        min-height: 35px;
        }

        .navbar-brand , .navbar-nav > li > a{
        padding-bottom: 7px;
        padding-top: 7px;
        }

        .navbar-text{
        margin-top: 7px;
        margin-bottom: 7px;

        }

        .sidenav {
        background-color: #FFFFFF;
        margin: 30px 0 0;
        padding: 0;
        width: 228px;
        }

        h1[id] {
            margin-top: -45px;
            padding-top: 60px;
        }



        .in-sidebar{
            padding-top: 60px;
            margin-top: -60px;
        }

    .stat-widget-container {
    text-align: center;
    }

    .stat-widget-container .stat-widget {
    float: left;
    width: 33%;
    }

    .stat-widget-container .stat-widget .stat-button {
    margin: 1.0em 0.5em;
    position: relative;
}


    .stat-widget-container .stat-widget  .stat-button .title {
        color: #999999;
        font-size: 1.5em;
        font-weight: bold;
    }


    .stat-widget-container .stat-widget .stat-button  .detail {
        color: #555555;
        font-size: 1.2em;
    }

    .compact-left {
        padding-left: 0px;

    }

    .compact-right {
        padding-right: 0px;

    }

     .compact-top {
        padding-top: 0px;

    }

     .rich-top {
        padding-top: 20px;

    }

     .compact-bottom {
        padding-bottom: 0px;

    }


     .rich-bottom {
        padding-bottom: 20px;

    }




        .nav-list > li > a {
            color: #222222;
        }
        .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
            background-color: #999999;
            color: #FFFFFF;
        }

{#        .sidenav.affix {#}
{#          position: static;#}
{#          width: auto;#}
{#          top: 0;#}
{#        }#}

        @media (max-width: 990px) {
          .sidenav.affix {
            position: static;
            width: auto;
            top: 0;
          }
        }

    </style>
    {% endcompress %}



    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    {% compress js %}
      <script src="{% static "GeekVPN/ie/html5shiv.js"  %}"></script>
      <script src="{% static "GeekVPN/ie/respond.min.js"  %}"></script>
    {% endcompress %}
    <![endif]-->



  </head>
  <body>
    <!--[if lt IE 8]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->



<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">GeekLien ToolBox</a>
        </div>

        <div class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav">
{#                <li><p class="navbar-text pull-right">Signed in as </p></li>#}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >{{ user.get_full_name }}<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a data-toggle="modal" data-target="#EditProfile" data-backdrop="static" >{% trans "Edit Profile"%}</a></li>
                        <li class="divider"></li>
                        <li><a href="{% url "geek-vpn-logout" %}">{% trans "Logout!"%}</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->

    </div>
</div>









<div class="container"><div class="row" >


    <div class="col-md-3" id="Sidebar-Content">
    </div>

    <div class="col-md-9" role="main">





        <div class="row">
            <div class="page-header">
                <h1 id="Overview">{% trans "Overview"%}</h1>
            </div>
        </div><!--/.row -->

        <div class="row">
            <div class="panel panel-default">
{#                <div class="panel-heading">{% trans "Overview"%}#}
{#                </div>#}
                <div class="panel-body stat-widget-container">


                    <div class="stat-widget">
                        <div class="stat-button">
                            <p class="title">{{ user.VpnUser.balance|floatformat:"1"  }} SC</p>
                            <p class="detail">{% trans "Cash Balances"%}</p>
                        </div>
                    </div>



{#                    <div class="stat-widget">#}
{#                        <div class="stat-button">#}
{#                            <p class="title">{{ user.VpnUser.count_vpn_account }}</p>#}
{#                            <p class="detail">VPN</p>#}
{#                        </div>#}
{#                    </div>#}

                </div><!--/.panel-body stat-widget-container -->
            </div>
         </div><!--/.row -->







        <div class="row">
            <div class="page-header">
                <h1 id="Profile">{% trans "Profile"%}</h1>
            </div>
        </div><!--/.row -->
        <div class="row" id="Profile-Content"></div>
        <div class = "row" id="Edit-Profile-Content"></div>


        <div class="row">
            <div class="page-header">
                <h1 id="Plan">{% trans "Plan"%}</h1>
            </div>
        </div><!--/.row -->
        <div class="row" id="Plan-Content"></div>


        <div class="row">
            <div class="page-header">
                <h1 id="Subscription">{% trans "Subscription"%}</h1>
            </div>
        </div><!--/.row -->
        <div class="row" id="Subscription-Content"></div>




















    </div><!--col-md-9 -->




</div></div><!--row9 --><!-- /.container -->











<div class="modal fade" id="alert-box" tabindex="-1" role="dialog" aria-labelledby="edit-failLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content col-md-6">
      <div class="modal-body">
       <h2 id = "alert-box-content">Error</h2>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

















<script src="{% static "GeekVPN/js/jquery-1.10.2.min.js"  %}"></script>
<script src="{% static "GeekVPN/js/bootstrap.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.validate.min.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.validate.messages_zh.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.cookie-1.4.0.js"  %}"></script>
<script src="{% static "GeekVPN/js/jquery.form-3.25.0.js"  %}"></script>
<script src="{% static "GeekVPN/js/bootstrap-switch.min.js"  %}"></script>
{% compress js %}
<script type="text/javascript">
//初始化Jquery支持Django跨站

var csrftoken = $.cookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            // Send the token to same-origin, relative URLs only.
            // Send the token only if the method warrants CSRF protection
            // Using the CSRFToken value acquired earlier
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

</script>


<script type="text/javascript">
//初始化页面
$.ajaxSetup({cache:true});
function get_profile_content (){ $("#Profile-Content").load("{% url 'geek-vpn-get-profile-content' %}")}
get_profile_content ();
function get_edit_profile_content (){ $("#Edit-Profile-Content").load("{% url 'geek-vpn-get-edit-profile-content' %}")}
get_edit_profile_content ();

function get_sidebar_content (){ $("#Sidebar-Content").load("{% url 'geek-vpn-get-sidebar-content' %}")}
get_sidebar_content ();

function get_plan_content (){ $("#Plan-Content").load("{% url 'geek-vpn-get-plan-content' %}")}
get_plan_content ();

function get_subscription_content (){ $("#Subscription-Content").load("{% url 'geek-vpn-get-subscription-content' %}")}
get_subscription_content ();


</script>



{% endcompress %}
</body>
</html>

